// 轮播切换
import React, { useState, useEffect } from 'react';
import Enquirenow from '../EnquireNow/Enquirenow';
import './CarouselSwitching.css';

type CarouselItem = {
    image: string;
    title: string;
    color: string;
};

type CarouselProps = {
    data: CarouselItem[];
};

const CarouselSwitching: React.FC<CarouselProps> = ({ data }) => {
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const iscancel = () => {
        setIsModalOpen(false);
    };

    const [index, setIndex] = useState(0);
    const [spanAnimation, setSpanAnimation] = useState('');

    useEffect(() => {
        const timer = setInterval(() => {
            setSpanAnimation('move-up'); // 向上移动
            setTimeout(() => {
                setIndex((prevIndex) => (prevIndex + 1) % data.length);
                setSpanAnimation('move-down'); // 向下移动，准备显示新标题
                setTimeout(() => {
                    setSpanAnimation(''); // 清空动画类
                }, 250); // 动画时间
            }, 250); // 等待动画完成时间
        }, 3000); // 每 3 秒切换一次

        return () => clearInterval(timer);
    }, [data.length]);

    const handleDotClick = (dotIndex: number) => {
        setIndex(dotIndex); // 点击圆点时更新索引
        setSpanAnimation('move-up');
        setTimeout(() => {
            setIndex(dotIndex);
            setSpanAnimation('move-down');
            setTimeout(() => {
                setSpanAnimation('');
            }, 250); // 与动画时间匹配
        }, 250); // 等待动画完成
    };

    return (
        <div className="carousel">
            <div className="carousel-title">
                <h2>
                    融合优势资源 <br />为企业定制独一无二的
                    <span className={spanAnimation} style={{ color: data[index].color, width: 150, whiteSpace: 'nowrap' }}>
                        {data[index].title}
                    </span>
                </h2>
            </div>
            <div className="carousel-dots">
                {data.map((_, idx) => (
                    <span
                        key={idx}
                        className={`dot ${idx === index ? 'active' : ''}`}
                        onClick={() => handleDotClick(idx)}
                    />
                ))}
            </div>
            <div style={{ width: '100%', height: '40px', textAlign: 'center', margin: '20px 0 ' }}>
                <button className='Enquirenow' onClick={showModal}>立即咨询</button>
                <Enquirenow isModalOpen={isModalOpen} iscancel={iscancel}></Enquirenow>
            </div>
            <div className="carousel-images">
                <div className="carousel-image-container">
                    {data.map((item, idx) => (
                        <div className={`carousel-image ${idx === index ? 'active' : ''}`} key={idx}>
                            <img src={item.image} alt={`Image ${idx}`} />
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default CarouselSwitching;